<template>
  <div>
    <div align="center">
      <Button type="success" @click="handleModel('insert')">添加</Button>
      <Button type="primary" @click="handleModel('update')">修改</Button>
      <Button type="error" @click="handleModel('delete')">删除</Button>
      <Modal v-model="modal1" @on-ok="ok" @on-cancel="cancel" align="center" inline>
        <Form ref="forminfo" :model="catalog" style="width: 12.5rem">
          <FormItem prop="id" style="display: none;">
            <Input  type="text" v-model="catalog.id">
            </Input>
          </FormItem>
          <FormItem prop="name" label="名称">
            <Input  type="text" v-model="catalog.name">
            </Input>
          </FormItem>
          <FormItem prop="code" label="编码">
            <Input type="text" v-model="catalog.code">
            </Input>
          </FormItem>
          <FormItem prop="pid" label="父级id">
            <Input type="text" v-model="catalog.pid" disabled>
            </Input>
          </FormItem>
          <FormItem prop="isParent" label="是否是父级">
            <Input type="text" v-model="catalog.isParent" disabled>
            </Input>
          </FormItem>
          <FormItem prop="order1" label="排序方式">
            <Input type="text" v-model="catalog.order1" disabled>
            </Input>
          </FormItem>
          <FormItem prop="gmtCreate" label="创建时间">
            <DatePicker @on-change="date=$event" size="large" v-model="catalog.gmtCreate" type="date" disabled></DatePicker>
            <!-- <Input type="date"  v-model="catalog.gmt_create" disabled> -->
          </FormItem>
          <FormItem prop="gmtModified" label="最后修改时间">
            <DatePicker size="large" @on-change="date=$event" v-model="catalog.gmtModified" type="date" disabled></DatePicker>
          </FormItem>
        </Form>
      </Modal>
    </div>
    <Tree :data="data" ref="tree" :load-data="loadData" show-checkbox></Tree>
  </div>
</template>
<script>
  import {
    getCatalogsByPid
  } from '../../api/catalog.js'

  import {
    getCatalogsById
  } from '../../api/catalog.js'

  import {
    addCatalog
  } from '../../api/catalog.js'

  import {
    delCatalogsById
  } from '../../api/catalog.js'
  export default {
    data() {
      return {
        data: [{
          title: '商品类目',
          loading: false,
          children: [],
          id: 0
        }],
        modal1: false,
        forminfo:'',
        catalog:{
          id:'',
          name:'',
          code:'',
          pid:'',
          isParent:0,
          order1:1,
          gmtCreate:new Date(),
          gmtModified:new Date()
        }
      }
    },
    methods: {
      //异步加载数据
      loadData(item, callback) {
        //catalog API
        getCatalogsByPid(item.id).then(res => {
          if (res.data.status == 200) {
            let tree_data = []
            //数据转换成tree组件需要的格式
            for (let i in res.data.date) {
              let item = {}
              item.id = res.data.date[i].id
              item.title = res.data.date[i].name
              if (res.data.date[i].isParent) {
                item.loading = false
                item.children = []
              }
              tree_data.push(item)
            }
            callback(tree_data);
          }
        });
      },
      ok() {
        addCatalog(this.catalog).then(res=>{
          this.$refs.forminfo.resetFields();
          alert("添加成功");
        })
      },
      cancel(){
          this.$refs.forminfo.resetFields();
      },
      handleModel(val){
        let nodes = this.$refs.tree.getSelectedNodes();
        if(nodes.length == 0){
          this.$Message.error("您没有选择节点");
        }else{
          this.forminfo = val;
          if(this.forminfo == 'insert'){
            this.catalog.pid = nodes[0].id;
            this.modal1 = true;
          }else if(this.forminfo == 'update'){
            if(nodes[0].id == 0){
              this.$Message.error("根节点不能修改");
              return;
            }
            getCatalogsById(nodes[0].id).then(res=>{
               console.log(res.data)
               this.catalog.id = res.data.id;
               this.catalog.name = res.data.name;
               this.catalog.code = res.data.code;
               this.catalog.pid = res.data.pid;
               this.catalog.isParent = res.data.isParent ? 1 : 0;
               this.catalog.order1 = res.data.order1;
               this.catalog.gmtCreate = res.data.gmtCreate;
               this.catalog.gmtModified = new Date();
            })
             this.modal1 = true;
          }else if(this.forminfo == 'delete'){
            if(nodes[0].id == 0){
              this.$Message.error("根节点不能删除");
            }else{
              delCatalogsById(nodes[0].id).then(res=>{
                if(res.status == 200){
                  alert("删除成功");
                }
              })
            }
          }
        }

      },
    }
  }
</script>
